<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户标签管理</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // 监听第一个链接的点击事件
            $('#add-tag-link').click(function () {
                // 获取当前选中的用户ID和distinctId
                const userid = [[${userid}]];
                // 生成表单并添加到页面
                const formHtml = '<form id="add-tag-form" action="/userTag/add/' + userid + '" method="POST">' +
                    '<label for="tagName">Tag Name:</label>' +
                    '<input type="text" id="tagName" name="tagName" required><br>' +
                    '<label for="tagValue">Tag Value:</label>' +
                    '<input type="text" id="tagValue" name="tagValue" required><br>' +
                    '<label for="distinctId">Distinct ID:</label>' +
                    '<input type="text" id="distinctId" name="distinctId" required><br>' +
                    '<label for="subject">Subject:</label>' +
                    '<input type="text" id="subject" name="subject" required><br>' +
                    '<input type="submit" value="Add Tag">' +
                    '</form>';
                $('#add-userTag').after(formHtml);
            })
        });
    </script>
</head>
<body>
<a id="add-tag-link" href="#">添加标签</a>
<a th:href="@{/userProfile/{userid}(userid=${userid})}">用户画像</a>
<div th:if="${userTags != null and #lists.size(userTags) > 0}">
    <div id="user-list">
        <h1>User Tag List</h1>
        <table>
            <tr>
                <th>TagName</th>
                <th>TagValue</th>
                <th>DistinctId</th>
                <th>UserId</th>
                <th>Subject</th>
                <th>InsertTime</th>
                <th>操作</th>
            </tr>
            <tr th:each="userTag : ${userTags}">
                <td th:text="${userTag.tagName}"></td>
                <td th:text="${userTag.tagValue}"></td>
                <td th:text="${userTag.distinctId}"></td>
                <td th:text="${userTag.userId}"></td>
                <td th:text="${userTag.subject}"></td>
                <td th:text="${userTag.insertTime}"></td>
                <td>
                    <a th:href="@{/userTag/delete/{userid}/{distinctid}(userid=${userTag.userId},distinctid=${userTag.distinctId})}"
                       onclick="event.preventDefault(); document.getElementById('deleteForm').submit();">删除标签</a></td>
                <td>
                    <form id="deleteForm"
                          th:action="@{delete/{userid}/{distinctid}(userid=${userTag.userId},distinctid=${userTag.distinctId})}"
                          method="post" style="display: none;">
                        <input type="hidden" name="_method" value="DELETE"/>
                        <!-- 添加其他需要的参数 -->
                    </form>
                </td>
            </tr>
        </table>

    </div>
</div>
<div id="add-userTag">
</div>
</body>
</html>
